// 显示带验证的弹框
function showPromptBtn(){
    const modal = new bootstrap.Modal(document.getElementById('inputModal'));
    modal.show();
}

function RoomRendering(room,buttonOnclick) {
    const otherRoomsContainer = document.getElementById('otherRoomsContainer');
    // 清空现有的房间卡片
    otherRoomsContainer.innerHTML = '';

    room.data.forEach(e => {
        let htmlDivElement = createRoomCard(e,buttonOnclick);
        otherRoomsContainer.appendChild(htmlDivElement);
    })
    renderTable(room)
}


function renderTable(data) {
    document.getElementById('pageInfo').innerText = `Page ${data.current} of ${data.total}`;
}

//创建房间卡片
function createRoomCard(roomData,buttonOnclick) {
    const card = document.createElement('div');
    card.classList.add('col-md-5', 'col-lg-5', 'mb-4', 'room-card');

    // 创建卡片内容
    const card_Data = document.createElement('div');
    card_Data.classList.add('card');

    const card_body = document.createElement('div');
    card_body.classList.add('card-body');

    {
        const h5 = document.createElement('h5');
        h5.classList.add('card-title', "text-center");
        h5.textContent = roomData.roomName;

        const roomUuid_p = document.createElement('p');
        roomUuid_p.classList.add('card-text');
        roomUuid_p.innerHTML = `<strong>房间号:</strong> ${roomData.roomUuid}`;

        const roomStatus_p = document.createElement('p');
        roomStatus_p.classList.add('card-text');
        roomStatus_p.innerHTML = `<strong>状态:</strong> ${roomData.roomStatus}`;

        const roomType_p = document.createElement('p');
        roomType_p.classList.add('card-text');
        roomType_p.innerHTML = `<strong>类型:</strong> ${roomData.roomType === 'PUBLIC' ? '公开房间' : '私密房间'}`;
        const roomPeopleNumber = document.createElement('p');
        roomType_p.classList.add('card-text');
        roomType_p.innerHTML = `<strong>人数:</strong> ${roomData.roomPeopleNumber}`;
        // 创建按钮
        const button = document.createElement('button');

        button.setAttribute('data-roomUuid', roomData.roomUuid);
        button.setAttribute('data-roomType', roomData.roomType);
        button.setAttribute('data-status', roomData.status);

        button.classList.add('btn', roomData.status === '正在游戏中' ? 'btn-success' : 'btn-primary');
        button.textContent = roomData.status === '正在游戏中' ? '进入观战' : '进入房间'
        button.onclick = buttonOnclick;

        card_body.append(h5, roomUuid_p, roomStatus_p, roomType_p, button)
    }

    card_Data.appendChild(card_body)
    card.appendChild(card_Data)
    return card;
}


export {
    RoomRendering,showPromptBtn
}